import {Callout, Tabs} from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Header

A header contains the page's title and navigation actions.
It is typically used on pages at the root of the navigation stack.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.header/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='header'/>
  </Tabs.Tab>
  <Tabs.Tab>
        ```dart copy
        FHeader(
          title: const Text('Edit Alarm'),
          suffixes: [
            FHeaderAction(
              icon: Icon(FIcons.alarmClock),
              onPress: () {},
            ),
            FHeaderAction(
              icon: Icon(FIcons.plus),
              onPress: () {},
            ),
          ],
        );
        ```
  </Tabs.Tab>
</Tabs>

## Nested Header

It is typically used on nested pages or sheets.

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='header' variant='nested'/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart copy
        FHeader.nested(
          title: const Text('Appointment'),
          prefixes: [
            FHeaderAction.back(onPress: () {}),
          ],
          suffixes: [
            FHeaderAction(
              icon: Icon(FIcons.info),
              onPress: () {},
            ),
            FHeaderAction(
              icon: Icon(FIcons.plus),
              onPress: () {},
            ),
          ],
        );
        ```
    </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create headers
```

## Usage

<Callout type="info">
    A header is typically used with `FScaffold`. A working example can be found [here](/docs/layout/scaffold).
</Callout>

### `FHeader(...)`

```dart copy
FHeader(
  style: FHeaderStyle(...),
  title: const Text('Title'),
  suffixes: [
    FHeaderAction(
      style: FHeaderActionStyle(...),
      icon: Icon(FIcons.alarmClock),
      onPress: () {},
      onHoverChange: (hovered) {},
      onStateChange: (delta) {},
    ),
    FHeaderAction(
      icon: Icon(FIcons.plus),
      onPress: () {},
    ),
  ],
);
```

### `FHeader.nested(...)`

```dart copy
FHeader.nested(
  style: FHeaderStyle(...),
  title: const Text('Title'),
  titleAlignment: Alignment.center,
  prefixes: [
    FHeaderAction.back(
      onPress: () {},
      onHoverChange: (hovered) {},
      onStateChange: (delta) {},
    ),
  ],
  suffixes: [
    FHeaderAction(
      style: FHeaderActionStyle(...),
      icon: Icon(FIcons.info),
      onPress: () {},
    ),
    FHeaderAction.x(
      onPress: () {},
      onHoverChange: (hovered) {},
      onStateChange: (delta) {},
    ),
  ],
);
```

## Examples

### Header

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='header'/>
  </Tabs.Tab>
  <Tabs.Tab>
        ```dart copy
        FHeader(
          title: const Text('Edit Alarm'),
          suffixes: [
            FHeaderAction(
              icon: Icon(FIcons.alarmClock),
              onPress: () {},
            ),
            FHeaderAction(
              icon: Icon(FIcons.plus),
              onPress: () {},
            ),
          ],
        );
        ```
  </Tabs.Tab>
</Tabs>

### Nested Header with Back Icon

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='header' variant='nested' />
  </Tabs.Tab>
  <Tabs.Tab>
        ```dart {4} copy
        FHeader.nested(
          title: const Text('Appointment'),
          prefixes: [
            FHeaderAction.back(onPress: () {}),
          ],
          suffixes: [
            FHeaderAction(
              icon: Icon(FIcons.info),
              onPress: () {},
            ),
            FHeaderAction(
              icon: Icon(FIcons.plus),
              onPress: () {},
            ),
          ],
        );
        ```
  </Tabs.Tab>
</Tabs>

### Nested Header with X Icon

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='header' variant='nested-x' />
  </Tabs.Tab>
  <Tabs.Tab>
        ```dart {14} copy
        FHeader.nested(
          title: const Text('Climate'),
          prefixes: [
            FHeaderAction(
              icon: Icon(FIcons.thermometer),
              onPress: () {},
            ),
            FHeaderAction(
              icon: Icon(FIcons.wind),
              onPress: null,
            ),
          ],
          suffixes: [
            FHeaderAction.x(onPress: () {}),
          ],
        );
        ```
  </Tabs.Tab>
</Tabs>
